<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机微信首页</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/iconfont.css">

  <link rel="stylesheet" href="css/wechat.css">
</head>

<body>

  <!-- 整体是上中下布局，上下固定，中间超出会有滚动条 -->
  <div class="container">

    <!-- 上面是标题和两个左侧的图标 -->
    <div class="top-box">

      <div>微信</div>

      <div>
        <i class="iconfont">&#xe60b;</i>
        <i class="iconfont">&#xe62f;</i>
      </div>

    </div>


    <div class="center-box">


      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>


      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>


      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>


      <!-- 聊天信息部分 -->
      <div class="chat-box">

        <!-- 左边是图标 -->
        <div class="chat-left">
          <i class="iconfont">&#xe602;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="right-box">

          <!-- 第一行是名称和时间 -->
          <div class="right-01">
            <div>2103班-班级群</div>
            <div class="info">上午9:04</div>
          </div>

          <!-- 第二行是信息预览和静音 -->
          <div class="info right-02">
            <div>李东威撤回了一条消息</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

    </div>


    <div class="bottom-box">

      <div class="active">
        <i class="iconfont">&#xe620;</i>
        <br>
        微信
      </div>

      <div>
        <i class="iconfont">&#xe655;</i>
        <br>
        通讯录
      </div>

      <div>
        <i class="iconfont">&#xe60c;</i>
        <br>
        发现
      </div>

      <div>
        <i class="iconfont">&#xe758;</i>
        <br>
        我
      </div>



    </div>



  </div>


</body>

</html>